<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #ff2fb6;

            border: 10px solid green;
            /*border-bottom: 2px solid red ;*/
            /*border-right: 20px solid #112 ;*/
            border-radius: 5px;

            /*padding: 10px 20px 30px 40px;*/
            padding-left: 10px;
            padding-bottom: 50px;
        }
    </style>
</head>
<body>
<div>这是一个div</div>
    <!--盒子模型

        盒子模型是所有html元素都有的一个模型特征
         它规定了所有html元素都拥有的层级结构，以便修饰和定位html元素
         或者相关的内容

         1. 外边距 margin
            作用设置元素边框到上级元素或者其他同级元素得距离，这个距离不会出现当前元素得背景，
            但是距离的大小是计算再当前元素得总宽高中。
            赋值方式:
                margin: 0 auto -- 居中
                margin:10px
                margin:10px 20px
                margin:10px 20px 30px 40px
                margin-left； 10px
                margin-right: 10px
                margin-top: 10px
                margin-bottom: 10px

         2. 边框 border
            作用是可以设置元素的边框大小，包括边框粗细、颜色等样式，目的是让元素更为美观
            赋值方式：
                border: 边框的粗细 边框的样式 颜色;   [四个方向一致]
                border-left
                border-right
                border-top
                border-bottom

                border-radius: 圆角度    【值越大越圆, 当值大于宽高包括边框的一半时，为正圆】

         3. 内边距 padding
            作用是设置元素内容到边框的距离，这个距离会显示背景颜色或者图片
            赋值方式：
                a. padding: 10px  [四个方向都是10px]
                b. padding: 10px 20px  [上下方向都是10px，左右方向都是20px]
                c. padding: 10px 20px 30px 40px  [顺时针赋值]
                d. podding-right: 10px
                   padding-bottom:10px
                   padding-top:10px
                   padding-left:10px

         4. 元素宽高 width height
            作用是来控制元素的大小的，赋值方式有两种：“
                a. 像素 px
                b. 上级元素百分比
    -->



</body>
</html>